<template>
	<view>
		<view class="dynamic-wrap">
			<view class="dynamic_head"><image src="@/static/demo/img/1.jpeg" mode="widthFix"></image></view>
			<view class="dynamic-right">
				<view class="hd">
					<view class="signature">
						<view class="sigin_text">斩龙的ninja</view>
						<view class="level_num">
							<view class="level_icon iconfont icon-jibie"></view>
							<view class="num">18</view>
						</view>
					</view>
					<view class="guanzghu">
						<view class="guanzhu_text">+关注</view>
						<view class="cancel_icon iconfont icon-delete"></view>
					</view>
				</view>
				<view class="sign">120斤到85斤 我的反抓人生</view>
				<view class="share_content">
					<view class="share_pic"><image src="@/static/demo/img/1.jpeg"></image></view>
					<view class="share_text">从男人的角度告诉你，为什莫他对你的好感却不醉你呢?</view>
				</view>
				<view class="footer_wrap">
					<view class="left_address">深圳 龙岗</view>
					<view class="r_share">
						<view class="a">
							<view class="share_box ">
								<view class="icona iconfont icon-forward-null"></view>
								<text>32</text>
							</view>
							<view class="share_box">
								<view class="icona iconfont icon-xinxi"></view>
								<text>236</text>
							</view>
							<view class="share_box">
								<view class="icona iconfont icon-xiaolian1"></view>
								<text>363</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="less" scoped>
.dynamic-wrap {
	display: flex;
	padding-top: 20rpx;
	margin-right: 20rpx;
	.dynamic_head {
		flex: 1;
		display: flex;
		justify-content: center;
		image {
			width: 70%;
			border-radius: 50%;
		}
	}
	.dynamic-right {
		flex: 4;
		border-bottom: 2rpx solid #cccccc;
		padding-bottom: 20rpx;
		.hd {
			display: flex;
			justify-content: space-between;
			.signature {
				display: flex;
				.sigin_text {
					color: #c7c7c7;
					font-size: 30rpx;
				}
				.level_num {
					height: 30rpx;
					width: 70rpx;
					background-color: #44b3ff;
					border-radius: 15rpx;
					color: #ffffff;
					font-size: 25rpx;
					margin-left: 15rpx;
					margin-top: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.level_icon {
						font-size: 22rpx;
					}
					.num {
						margin-bottom: 5rpx;
					}
				}
			}
			.guanzghu {
				display: flex;
				align-items: center;
				.guanzhu_text {
					height: 50rpx;
					width: 80rpx;
					background-color: #f4f4f4;
					font-size: 25rpx;
					text-align: center;
					line-height: 50rpx;
				}
				.cancel_icon {
					color: #dddddd;
					padding-left: 15rpx;
				}
			}
		}
		.sign {
			font-weight: 550;
		}
		.share_content {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			background-color: #f7f7f7;
			align-items: center;
			margin: 20rpx 0;
			.share_pic {
				flex: 2;
				height: 70rpx;
				padding: 0 15rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.share_text {
				flex: 6;
				font-size: 25rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
		.footer_wrap {
			display: flex;
			justify-content: space-between;
			margin: 0 15rpx;
			color: #bbbbbb;
			.r_share {
				.a {
					display: flex;
					.share_box {
						display: flex;
						align-items: center;
						padding: 0 15rpx;
						.icona {
							padding-right: 10rpx;
							display: flex;
						}
					}
				}
			}
		}
	}
}
</style>
